<template>
	<view>
		<!-- 自定义导航栏 -->
		<uni-nav-bar
			fixed
			:height="48"
			left-icon="back"
			rightIcon="search" statusBar
			@clickRight="search()"
			@clickLeft="backTo()"
		>
			<uni-search-bar
				v-model="test"
				placeholder="搜索书名、作者、关键字"
				:radius="15"
				cancelButton="none"
				style="width: 100%;"
				@confirm="search()"
				@clear="result = null"
			/>
		</uni-nav-bar>
		<!-- 页面加载后 未搜索 -->
		<view v-show="!result">
			<view>
				<!-- 搜索历史 -->
				<view class="title" v-show="history.length != 0">
					<view>搜索历史</view>
					<view @click="history = []">
						<view>清空</view>
						<uni-icons type="trash"></uni-icons>
					</view>
				</view>
				<!-- 搜索历史记录 -->
				<view class="history"><uni-tag  v-for="(item, index) in history" :text="item" circle @click="toSearch(item)"></uni-tag></view>
			</view>
			<!-- 热门推荐 -->
			<view>
				<!-- 标题 -->
				<view class="title"><view>热门搜索</view></view>
				<!-- over -->
				<!-- 列表 -->
				<view class="search-list" v-for="(item, index) in data" :key="index" @click="toDetail(item.id)">
					<view class="topone">{{ index + 1 }}</view>
					<image :src="item.cover" class="cover" mode="widthFix"></image>
					<view>
						<view>{{ item.name }}</view>
						<view>{{ item.desc }}</view>
						<view>{{ item.author }}·玄幻</view>
					</view>
				</view>
				<!-- over -->
			</view>
		</view>

		<view v-show="result">
			<!-- 搜索结果为空 -->
			<view v-if="result == 'null'" style="background-color: #f8f8f8;height: 100vh;">
				<image
					src="../../static/search-blank.png"
					style="width: 100%;margin-top: 120rpx;"
					mode="widthFix"
				></image>
				<view style="width: 100%;text-align: center;font-weight: 600; font-size: 40rpx;margin: 20rpx 0;">
					暂无搜索记录哦~
				</view>
			</view>
			<!-- 搜索结果不为空 -->
			<view v-else>
				<view class="search-list" v-for="(item, index) in result" :key="index" @click="toDetail(item.id)">
					<view class="topone">{{ index + 1 }}</view>
					<image :src="item.cover" class="cover" mode="widthFix"></image>
					<view>
						<view>{{ item.name }}</view>
						<view>{{ item.desc }}</view>
						<view>{{ item.author }}·玄幻</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			test: '',
			history: [], //搜索历史
			result: null,
			data: []
		};
	},
	mounted() {
		this.getData();
	},
	computed: {},
	methods: {
		// 跳转图书详情页面
		toDetail(id) {
			uni.navigateTo({
				url: `/pages/bookDetail/bookDetail?id=${id}`
			});
		},
		// 返回上一页
		backTo() {
			uni.navigateBack({
				delta: 1
			});
		},
		getData() {
			uni.request({
				url: `${getApp().globalData.baseURL}/v1/novel/index`,
				success: res => {
					console.log(res.data.data);
					this.data = res.data.data.hotUpdate;
				}
			});
		},
		// 输入框 confirm
		search() {
			if (this.test.trim() == '') return;
			console.log(this.test);
			// 如果搜索历史记录不同则添加
			if (!this.history.some(item => item == this.test.trim())) {
				this.history.push(this.test);
			}
			// 搜索接口
			uni.request({
				url: `${getApp().globalData.baseURL}/v1/novel/search/${this.test.trim()}`,
				success: res => {
					console.log(res);
					if (res.data.code == 200) {
						this.result = res.data.data;
					}else if(res.data.code==201){
						this.result='null'
						console.log(this.result)
					}
				}
			});
		},
		// 点击历史记录搜索
		toSearch(test){
			this.test=test
			this.search()
		}
	}
};
</script>

<style lang="scss" scoped>
// 图书封面
.cover {
	width: 130rpx;
	border-radius: 0 10rpx 10rpx 0;
}
.uni-searchbar {
	padding: 0;
	align-items: center;
}
// 搜索框 文字位置
/deep/.uni-searchbar__box {
	justify-content: flex-start;
	height: 60rpx;
}
// 搜索历史
.title {
	display: flex;
	justify-content: space-between;
	padding: 30rpx 20rpx;
	> view:first-child {
		font-weight: 600;
		font-size: 40rpx;
	}
	> view:last-child {
		// color: #333;
		display: flex;
		align-items: center;
	}
}
.history {
	padding: 0 20rpx;
	display: flex;
	flex-wrap: wrap;
	// tag标签
	.uni-tag {
		padding: 8rpx 26rpx;
		margin: 10rpx;
		color: #333;
		background-color: #f8f8f8;
		border: 0;
	}
}
// 热门搜索列表
.search-list {
	height: 172rpx;
	padding: 24rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	> view:first-child {
		font-weight: 600;
		font-size: 36rpx;
		padding: 0 10rpx;
	}
	> view:last-child {
		padding-right: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 100%;
		> view:first-child {
			font-weight: 600;
			font-size: 32rpx;
		}
		> view:nth-child(2) {
			color: #999;
			width: 480rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		> view:last-child {
			color: #666;
		}
	}
}
.topone {
	color: #ff604f;
}
.toptwo {
	color: #ff8956;
}
.topthree {
	color: #feb200;
}
.topother {
	color: #666;
}
</style>
